import React from 'react';
import Chart from 'echarts-for-react';
import {pollutantCorrelation} from '../../../services/cockpit';

const bar1 = 'image://'+require('../../../assets/bar1.png');
const bar2 = 'image://'+require('../../../assets/bar2.png');
const bar3 = 'image://'+require('../../../assets/bar3.png');

// let data = {
//     value:[
//         {
//             series : [
//                 {data: [7,7,7,7,7,7],name:'修复前'},
//                 {data: [8,8,8,8,8,8],name:'修复标准'},
//                 {data: [6,6,6,6,6,6],name:'修复后'},
//             ]
//         },
//         {
//             series : [
//                 {data: [6,6,6,6,6,6],name:'修复前'},
//                 {data: [9,9,9,9,9,9],name:'修复标准'},
//                 {data: [5,5,5,5,5,5],name:'修复后'},
//             ]
//         },
//     ],
//     time:['01-01','01-02']
// };

class MyBarR extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataList: '',
        };
    }
    componentDidMount() {

        pollutantCorrelation().then(data => {
            let dataList = data.data.ret;
            this.setState({
                dataList
            })
        })
    }
    setOption = () => {
        let myOption;
        let data = this.state.dataList;
        myOption = {
            baseOption: {
                textStyle:{color:'#fff'},
                color:['#66ABFF','#25BAA4','#205267'],
                timeline: {
                    top: 220,
                    left:20,
                    right:20,
                    axisType: 'category',
                    // realtime: false,
                    // loop: false,
                    autoPlay: true,
                    // currentIndex: 2,
                    playInterval: 3000,
                    symbol:'circle',
                    lineStyle:{
                        color:'#385883'
                    },
                    label:{color:'#fff'},
                    itemStyle:{
                        color:'#385883'
                    },
                    checkpointStyle:{
                        color:'#fff',
                        borderColor:'#385883'
                    },
                    controlStyle:{
                        color:'#385883'
                    },
                    data: data.time,
                },
                tooltip: {
                },
                legend: {
                    
                    x: 'right',
                    data: ['修复前', '修复标准','修复后'],
                    textStyle:{
                        color:'#fff'
                    },
                    top:10
                },
                calculable : true,
                grid: {
                    top: 80,
                    bottom: 100,
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                show: true,
                                formatter: function (params) {
                                    return params.value.replace('\n', '');
                                }
                            }
                        }
                    }
                },
                xAxis: [
                    {
                        axisLine:{lineStyle:{color:'#66ABFF'}},
                        'type':'category',
                        'axisLabel':{'interval':0},
                        'data':['六氯苯','硝基苯','苯并(a)芘','苯并(a)蒽','三氯乙烯','1,4-二氯苯'],
                    }
                ],
                yAxis: [
                    {
                        axisLine:{lineStyle:{color:'#66ABFF'}},
                        splitLine:{lineStyle:{color:'#063436',type:'dashed'}},
                        type: 'value',
                        name: 'mg/kg'
                    }
                ],
                series: [
                    {
                        name: '修复前',
                        type: 'pictorialBar',
                        barGap:'30%',
                        barWidth:'30%',
                        symbol: bar1,
                        symbolSize: ['100%', '100%'],
                        symbolOffset:['60%',0]
                        
                    },
                    {
                        name: '修复标准',
                        type: 'pictorialBar',
                        barGap:'30%',
                        barWidth:'30%',
                        symbol: bar3,
                        symbolSize: ['100%', '100%'],
                        symbolOffset:['60%',0],
                        z:3
                    },
                    {
                        name: '修复后',
                        type: 'pictorialBar',
                        barGap:'30%',
                        barWidth:'30%',
                        symbol: bar2,
                        symbolSize: ['100%', '100%'],
                        symbolOffset:['-70%',0],
                        z:3
                      

                       
                    },
                ]
            },
            options: data.value
        };
        return myOption;
    };
    render() {
        return (
            <div>
                <Chart
                    option={this.setOption()}
                    notMerge
                    lazyUpdate
                    style={{ height: 290 }}
                />
            </div>
        )
    }
}
export default MyBarR;
